<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>数据集配置</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型配置</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型训练</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>应用评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <div class="title">数据集配置</div>
            <div class="action">
                <div>
                    <strong>{{sels}}</strong>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span (click)="addDataset()">新建数据集</span>&nbsp;&nbsp;<span (click)="importDataset()">导入数据集</span>
                </div>
                <div class="flex align_center">
                    <div>
                        <nz-input-group [nzSuffix]="suffixIconSearch">
                            <input type="text" nz-input placeholder="请输入标签名称" />
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <i nz-icon nzType="search"></i>
                        </ng-template>
                    </div>
                    <div class="refresh_box">
                        <img src="assets/images/icon_refresh.png" alt="">
                    </div>
                </div>
            </div>
            <div class="tables">
                <nz-table
                    #rowSelectionTable
                    nzShowPagination
                    nzShowSizeChanger
                    [nzData]="listOfData"
                    [nzNoResult]="empTemplate"
                >
                <thead>
                    <tr>
                        <th></th>                
                        <th style="width: 25%;">数据集名称</th>
                        <th style="width: 25%;">创建时间</th>
                        <th style="width: 25%;">标注进度</th>
                        <th style="width: 25%;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of rowSelectionTable.data">
                        <td><input type="checkbox" value="{{ data.name }}" (click)="chkClick($event)"></td>
                        <td>{{ data.name }}</td>
                        <td>{{ data.createTime }}</td>
                        <td><nz-progress [nzPercent]="data.progress"></nz-progress></td>
                        <td><a [routerLink]="['/extract/extractTag',data.id]" >标注</a></td>
                    </tr>
                </tbody>
                </nz-table>
                <ng-template #empTemplate><img style="padding-top: 80px;" src="../../../../../assets/images/epy.png"><div class="epy">暂无数据，请先<span>新建训练数据集</span></div></ng-template>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" (click)="nextStep()">下一步</button>
    </div>
</div>

<!-- <nz-modal [(nzVisible)]="addVisible" nzTitle="新建数据集" nzWidth="500px" (nzOnCancel)="handleAddCancel()" nzCentered="true" nzOkDanger="true"> -->
    <!-- <ng-template #drawerTemplate let-data let-drawerRef="drawerRef"> -->
<nz-drawer
        [nzBodyStyle]="{ overflow: 'auto' }"
        [nzMaskClosable]="false"
        [nzWidth]="500"
        [nzVisible]="addVisible"
        nzTitle="新建数据集"
        (nzOnClose)="handleAddCancel()"
    >        
    
    <div >
        <div class="modal-form-item">                
            <div class="import-modal-form-item-title"><span>*</span>数据集名称:</div>
            <div><input nz-input placeholder="模型名称"  /></div>
        </div>
        <div class="modal-form-item">                
            <div class="import-modal-form-item-title">描述:</div>
            <div><textarea nz-input placeholder="描述" [nzAutosize]="{ minRows: 3, maxRows: 5 }"></textarea></div>
        </div>
        <div style="border-top:solid 1px #dfe1e6;">&nbsp;</div>
        <div class="modal-form-item">                
            <div class="import-modal-form-item-title"><span>*</span>数据集上传方式:</div>
            <div>
                <nz-radio-group [(ngModel)]="radioValue">
                    <label nz-radio nzValue="OBS">OBS</label>
                    <label nz-radio nzValue="本地上传">本地上传</label>
                  </nz-radio-group>
            </div>
        </div>

        <div class="modal-form-item">                
            <div class="import-modal-form-item-title"><span>*</span>数据集输入位置:</div>
            <div><input nz-input placeholder="模型名称"  /></div>
        </div>

        <div class="modal-form-item">                
            <div class="import-modal-form-item-title"><span>*</span>数据集输出位置:</div>
            <div><input nz-input placeholder="模型名称" /></div>
        </div>
    </div>
    <div style="position:absolute; right:20px;bottom: 20px;border-top: 1px solid #eee;width: 465px;padding-top: 10px;">
        <div style="float: right">
            <button nz-button nzType="primary" style="background-color: #F66F6A;color: white;border: none;" nzDanger (click)="handleAddCancel()">确定</button>&nbsp;&nbsp;&nbsp;
            <button nz-button nzType="default" (click)="handleAddCancel()">取消</button>
        </div>
    </div>

</nz-drawer>
<nz-modal [(nzVisible)]="importVisible" nzTitle="导入数据集" nzWidth="700px" (nzOnCancel)="handleImportCancel()" nzCentered="true" nzOkDanger="true">
    <div>

        <div class="import-modal-form-item">   
            <div style="width: 300px;">       
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input type="text" nz-input placeholder="请输入模型名称" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i nz-icon nzType="search"></i>
                </ng-template>
            </div>      
        </div>
        <div class="div-table">                
            <table class="import-table">
                <tr class="import-table-tr">             
                    <th style="width: 10%;">&nbsp;</th>   
                    <th style="width: 30%;">数据集名称</th>
                    <th style="width: 30%;">来源</th>
                    <th style="width: 30%;">标注进度</th>
                </tr>
                <tr class="import-table-tr-data">
                    <td><input type="radio"></td>
                    <td>AG-0031</td>
                    <td>数据标注平台</td>
                    <td><nz-progress [nzPercent]="25"></nz-progress></td>
                </tr>
                <tr class="import-table-tr-data">
                    <td><input type="radio"></td>
                    <td>AG-0031</td>
                    <td>数据标注平台</td>
                    <td><nz-progress [nzPercent]="25"></nz-progress></td>
                </tr>
                <tr class="import-table-tr-data">
                    <td><input type="radio"></td>
                    <td>AG-0031</td>
                    <td>数据标注平台</td>
                    <td><nz-progress [nzPercent]="25"></nz-progress></td>
                </tr>
            </table>
        </div>
    </div>
    <div *nzModalFooter>
      <button nz-button nzType="primary" disabled nzDanger (click)="handleImportCancel()">确定</button>
      <button nz-button nzType="default" (click)="handleImportCancel()">取消</button>
    </div>
</nz-modal>